@import "../base.less";
.mt-25 {
  margin-top: .25rem;
}
.introduce-title {
  position: relative;
  width: 100%;
  img {
    width: 100%;
  }
  h1 {
    position: absolute;
    left: 0;
    top: 1.1rem;
    width: 100%;
    color: #fff;
    .fs(48);
    text-align: center;
    font-weight: normal;
    span {
      color: #00a2ff;
    }
  }
  h5 {
    position: absolute;
    left: 0;
    top: 1.4rem;
    width: 100%;
    .fs(14);
    color: #8f93a2;
    text-align: center;
    font-weight: normal;
  }
  .introduce-title-content {
    position: absolute;
    //top: 2rem;
    top: 1.9rem;
    left: 0;
    width: 100%;
    //padding: .35rem .3rem 0 .3rem;
    padding: .15rem .3rem 0 .3rem;
    text-align: center;
    box-sizing: border-box;
    //background-color: #000;
    h3 {
      width: 100%;
      .fs(35);
      color: #fff;
      font-weight: normal;
    }
    h2 {
      width: 100%;
      margin-top: .1rem;
      .fs(28);
      color: #c3c3c3;
      text-align: left;
      line-height: .2rem;
      font-weight: normal;
    }
  }
}
.introduce-content {
  .introduce-item-white {
    padding-top: .3rem;
    background-color: #fff;
    box-sizing: border-box;
  }
  .introduce-item-gray {
    padding-top: .3rem;
    background-color: #f3f3f3;
    box-sizing: border-box;
  }
  img {
    width: 100%;
  }
  .img-special {
    width: 60%;
    margin: .2rem auto;
  }
  .img-map {
    width: 100%;
    margin: .2rem auto .1rem auto;
  }
  .introduce-img-area {
    position: relative;
    width: 100%;
    padding: 0 .2rem;
    margin-top: .2rem;
    box-sizing: border-box;
    .img-icon {
      position: absolute;
      top: .3rem;
      left: 20%;
      width: .4rem;
    }
    .content-area {
      position: absolute;
      top: .2rem;
      left: 37%;
      width: 57%;
      color: #fff;
      h4 {
        .fs(28);
        line-height: .3rem;
      }
      h5 {
        color: #b7b8ba;
        .fs(24);
        line-height: .2rem;
      }
    }
  }
  h2 {
    text-align: center;
    color: #121212;
    .fs(35);
  }
  h3 {
    margin-top: .2rem;
    text-align: center;
    .fs(28);
    line-height: .2rem;
    color: #666;
    &.no-mt {
      margin-top: 0;
    }
  }
  .introduce-box-area {
    width: 2.35rem;
    padding: 0 .1rem .1rem .1rem;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    line-height: .36rem;
    div {
      margin-top: .1rem;
    }
    .item-title {
      .fs(35);
      color: #000;
      margin-top: 0;
    }
    .item1 {
      margin-top: 0;
      .fs(28);
      color: #fff;
      background-color: #008eff;
    }
    .item2 {
      .fs(28);
      color: #fff;
      background-color: #04a6db;
    }
    .item3 {
      .fs(28);
      color: #fff;
      background-color: #0acac8;
    }
    .item4 {
      .fs(28);
      color: #fff;
      background-color: #03d981;
    }
  }
  .button-area {
    padding-bottom: .25rem;
    text-align: center;
    .fs(28);
    color: #121212;
    line-height: .3rem;
    .button-item {
      display: inline-block;
      width: 1.42rem;
      border: 1px solid #ddd;
      background: url(../../img/aboutUs/introduce_arrow.png) no-repeat 95% center;
      background-size: .05rem;
      span {
        color: #808080;
      }
      &.large {
        width: 1.67rem;
      }
    }
  }
  .introduce-footer {
    position: relative;
    .introduce-footer-text {
      position: absolute;
      left: 0;
      top: .5rem;
      width: 100%;
      text-align: center;
      .fs(35);
      span {
        color: #008eff;
      }
    }
    .img-before {
      position: absolute;
      left: 20%;
      top: .44rem;
      width: 0.07rem;
    }
    .img-after {
      position: absolute;
      left: 80%;
      top: .44rem;
      width: 0.07rem;
    }
  }
}